<template>
	<view class="MaterialResource" :class="{ skelett: isSkelett }">
		<view class="MaterialResource-item" v-show="isFormatImageList">
			<view class="MaterialResource-item-title">
				<view>
					<image :src="imageIcon" />
					<text>图片</text>
				</view>
			</view>

			<view class="MaterialResource-item-main">
				<view
					class="MaterialResource-item-main-box"
					v-for="(item, index) in formatImageList"
					:key="index"
					:style="{ marginTop: boxMaginTop }"
				>
					<view
						class="MaterialResource-item-main-box-item"
						:key="subIndex"
						:style="[staticItemStyle]"
						v-for="(subItem, subIndex) in item"
						:class="{
							'status-success-conduct': ['wait', 'error'].includes(subItem ? subItem.status : '')
						}"
					>
						<image
							mode="aspectFill"
							:src="subItem.previewUrl"
							class="default-image"
							@click.prevent.stop="openPreview(formatImageList, index, subIndex)"
						/>

						<!-- 上传成功 -->
						<template v-if="subItem.status === 'success'">
							<image
								class="upload-success"
								:src="uploadStatus.success"
								@click.prevent.stop="deleteUploadSuccessFile(subItem, index, subIndex)"
							/>
						</template>

						<!-- 上传失败 -->
						<template v-if="subItem.status === 'error'">
							<image :src="uploadStatus.error" class="upload-hint" />
							<view class="upload-error-hint" @click.prevent.stop="clickAgainUpload(subItem, index, subIndex)">
								<image :src="uploadStatus.refresh" />
								<text>点击重传</text>
							</view>
						</template>

						<!-- 上传中 -->
						<template v-if="subItem.status === 'upload'">
							<view class="upload-error-hint">
								<ArCircleProgress :percent="subItem.percent || 0" />
								<text>上传中</text>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<view class="MaterialResource-item" v-show="isFormatVideoList">
			<view class="MaterialResource-item-title">
				<view>
					<image :src="videoIcon" />
					<text>视频</text>
				</view>
			</view>

			<view class="MaterialResource-item-main">
				<view
					class="MaterialResource-item-main-box"
					v-for="(item, index) in formatVideoList"
					:key="index"
					:style="{ marginTop: boxMaginTop }"
				>
					<view
						class="MaterialResource-item-main-box-item"
						:key="subItem.name"
						:style="[staticItemStyle]"
						v-for="(subItem, subIndex) in item"
						:class="{
							'status-success-conduct': subItem.status === 'wait'
						}"
					>
						<image
							class="default-image"
							:src="isDisablePreview ? videoDefaultBgImage : subItem.previewUrl"
							@click.prevent.stop="openPreview(formatVideoList, index, subIndex)"
						/>

						<template v-if="!isDisablePreview">
							<text class="duration">{{ subItem.duration }}</text>
						</template>

						<!-- 上传成功 -->
						<template v-if="subItem.status === 'success'">
							<image
								class="upload-success"
								:src="uploadStatus.success"
								@click.stop.prevent="deleteUploadSuccessFile(subItem, subIndex)"
							/>
						</template>

						<!-- 上传失败 -->
						<template v-if="subItem.status === 'error'">
							<image :src="uploadStatus.error" class="upload-hint" />
							<view class="upload-error-hint" @click.prevent.stop="clickAgainUpload(subItem, index, subIndex)">
								<image :src="uploadStatus.refresh" />
								<text>点击重传</text>
							</view>
						</template>

						<!-- 上传中 -->
						<template v-if="subItem.status === 'upload'">
							<view class="upload-error-hint">
								<ArCircleProgress :percent="subItem.percent || 0" />
								<text>上传中</text>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<DistributionResourcePreview
			:remote="remote"
			v-model="isPopup"
			:list="previewList"
			:index="previewCurrentIndex"
			@changeIndex="changePreviewCurrentIndex"
			:requestOtherParams="previewOtherParams"
		/>
	</view>
</template>

<script>
import { chunk } from 'lodash';
import { defaultImageUrl } from '@/utils';
import { getMaterialFileSize } from '@/utils/common';

import ArCircleProgress from '@/components/distributionArCircleProgress';
import DistributionResourcePreview from '@/components/distributionResourcePreview';

const videoIcon = Object.freeze(`${defaultImageUrl}icon/icon_upload_video.png`);
const imageIcon = Object.freeze(`${defaultImageUrl}icon/icon_upload_picture.png`);
const videoDefaultBgImage = Object.freeze(`${defaultImageUrl}image/video_default_bgimg.png`);

const uploadStatus = Object.freeze({
	success: `${defaultImageUrl}icon/icon_upload_delete.png`,
	refresh: `${defaultImageUrl}icon/icon_upload_update.png`,
	error: `${defaultImageUrl}icon/icon_upload_warn.png`
});

const { itemSize, marginLeft, widthHeight } = getMaterialFileSize({
	margin: 28,
	height: 140,
	padding: 80
});

export default {
	name: 'MaterialResource',

	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},

		isSkelett: {
			type: Boolean,
			default: false
		},

		isPreview: {
			type: Boolean,
			default: true
		},

		skelettSize: {
			type: Number,
			default: 3
		},

		orderStatus: {
			type: [Number, undefined],
			default: undefined
		},
		remote: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			itemSize,
			imageIcon,
			videoIcon,
			uploadStatus,
			videoDefaultBgImage,
			isPopup: false,
			previewList: [],
			previewCurrentIndex: undefined
		};
	},

	computed: {
		previewOtherParams() {
			const { isPreview } = this;

			if (isPreview) {
				return {
					preview: false
				};
			}

			return {};
		},

		staticItemStyle() {
			return {
				marginLeft: `${marginLeft}px`,
				width: `${widthHeight}px`,
				height: `${widthHeight}px`
			};
		},

		boxMaginTop() {
			return `${marginLeft}px`;
		},

		isFormatImageList() {
			const { formatImageList } = this;

			return formatImageList?.length;
		},

		formatImageList() {
			const { list, isSkelett, skelettSize } = this;
			const singleObject = list.find((item) => item.type === 'image');

			if (isSkelett) {
				return [Array.from({ length: skelettSize }).map((item) => ({}))];
			}

			if (!singleObject) {
				return [];
			}

			return chunk(singleObject?.list, itemSize);
		},

		isFormatVideoList() {
			const { formatVideoList } = this;

			return formatVideoList?.length;
		},

		formatVideoList() {
			const { list, isSkelett, skelettSize } = this;
			const singleObject = list.find((item) => item.type === 'video');

			if (isSkelett) {
				return [Array.from({ length: skelettSize }).map((item) => ({}))];
			}

			if (!singleObject) {
				return [];
			}

			return chunk(singleObject?.list, itemSize);
		},

		isDisablePreview() {
			const { orderStatus } = this;

			return orderStatus === 0;
		}
	},

	methods: {
		clickAgainUpload(params, index, subIndex) {
			const currentIndex = itemSize * index + subIndex;

			this.$emit('clickAgainUpload', {
				...params,
				index: currentIndex
			});
		},

		deleteUploadSuccessFile(params, index, subIndex) {
			const currentIndex = itemSize * index + subIndex;

			let data = params?.$orig || params;

			this.$emit('delteUploadSuccessFile', {
				...data,
				index: currentIndex
			});
		},

		changePreviewCurrentIndex(index) {
			this.previewCurrentIndex = index;
		},

		openPreview(target, index, subIndex) {
			const { isPreview, isDisablePreview } = this;

			const formatList = target.flat(2);

			if (!isPreview || (isDisablePreview && formatList[0].type === 'video')) {
				return;
			}

			this.previewList = formatList;
			this.previewCurrentIndex = itemSize * index + subIndex;

			this.isPopup = true;
		}
	},

	components: {
		ArCircleProgress,
		DistributionResourcePreview
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.MaterialResource {
	&-item {
		margin-top: 20rpx;
		padding: 0 20rpx 20rpx 20rpx;

		background: #fff;
		border-radius: 24rpx;

		&-title {
			height: 88rpx;

			font-weight: bold;
			color: #333;
			font-size: 32rpx;

			view {
				height: 100%;
				display: flex;
				align-items: center;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}

		&:first-child {
			margin-top: 0;
		}

		&-main {
			&-box {
				display: flex;

				overflow: hidden;
				border-radius: 12rpx;

				&-item {
					position: relative;

					&:first-child {
						margin-left: 0 !important;
					}

					&.status-success-conduct::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						z-index: 6;
						height: 100%;
						border-radius: 12rpx;
						background: rgba(0, 0, 0, 0.5);
					}

					.default-image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}

					.duration {
						color: #fff;
						font-size: 24rpx;
						padding: 0 8rpx;
						position: absolute;
						bottom: 6rpx;
						right: 6rpx;
						z-index: 4;

						height: 28rpx;
						line-height: 28rpx;
						background: #000;
						border-radius: 8rpx;
					}

					.upload-success {
						position: absolute;
						top: 0;
						right: 0;
						width: 40rpx;
						height: 40rpx;
						z-index: 9;
						margin: 0 0 10rpx 10rpx;
					}

					.upload-hint {
						position: absolute;
						top: 6rpx;
						right: 6rpx;
						width: 28rpx;
						height: 28rpx;
						z-index: 9;
					}

					.upload-error-hint {
						position: absolute;
						top: 50%;
						left: 50%;
						z-index: 9;
						width: 132rpx;
						height: 118rpx;
						transform: translate(-50%, -50%);

						width: 120rpx;
						display: flex;
						padding: 10rpx 0;
						align-items: center;
						flex-direction: column;

						image {
							width: 32rpx;
							height: 32rpx;
						}

						text {
							color: #fff;
							font-size: 20rpx;
							margin-top: 14rpx;
						}
					}
				}

				&:first-child {
					margin-top: 0 !important;
				}
			}
		}
	}

	&.skelett {
		.MaterialResource-item-title {
			view {
				display: inline-block;

				border-radius: 12rpx;
				background: $skelettBgColor;

				image,
				text {
					visibility: hidden;
				}
			}
		}

		.MaterialResource-item-main-box-item {
			border-radius: 12rpx;
			background: $skelettBgColor;

			image,
			.duration {
				display: none;
			}
		}
	}
}
</style>
